<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>HTML Academy: Седона</title>
    <link href="css/style.min.css" rel="stylesheet" />
    <script src="js/picturefill.min.js"></script>
    <script src="js/svg4everybody.min.js"></script>
    <script>
      svg4everybody();
    </script>
    <link rel="preload" href="fonts/ptsans.woff2" as="font" />
    <link rel="preload" href="fonts/ptsansbold.woff2" as="font" />
  </head>
  <body>
    <div class="container">
      <div style="display:none">
        <include src="build/img/sprite.svg"></include>
      </div>
      <header class="page-header">
        <nav class="page-header__main-nav main-nav">
          <!-- Класcы переключающие состояние - ".site-list" и ".site-list--open" -->
          <ul class="main-nav__list site-list">
            <li class="site-list__item">
              <a class="site-list__link" href="index.html">Главная</a>
            </li>
            <li class="site-list__item">
              <a class="site-list__link site-list__link--active"
                >Фото и видео</a
              >
            </li>
            <li class="site-list__item">
              <a class="site-list__link" href="form.html">Форма отзыва</a>
            </li>
            <li class="site-list__item">
              <a
                class="site-list__link"
                href="https://htmlacademy.ru/intensive/adaptive"
                >HTML Academy</a
              >
            </li>
          </ul>
          <!-- Классы переключающие соcтояние - ".main-nav__toggle" и ".main-nav__toggle--cross" -->
          <button
            class="main-nav__toggle"
            type="button"
            aria-label="Открыть меню"
          ></button>
        </nav>
        <div class="page-header__logo logo">
          <a
            class="logo__link"
            href="index.html"
            aria-label="Перейти на гланую страницу"
          >
            <picture>
              <source
                media="(min-width: 1200px)"
                srcset="img/logo-sedona-desktop.svg"
              />
              <source
                media="(min-width: 768px)"
                srcset="img/logo-sedona-tablet.svg"
              />
              <img
                class="logo__image"
                src="img/logo-sedona-mobile.svg"
                width="102"
                height="83"
                alt="Логотип сайта"
              />
            </picture>
          </a>
        </div>
      </header>
      <main class="page-main">
        <div class="page-main__promo-block promo-block promo-block--minimal">
          <img
            class="promo-block__image promo-block__image--minimal"
            src="img/text-sedona.svg"
            width="229"
            height="39"
            alt="Надпись SEDONA"
          />
        </div>
        <div class="page-main__page-info page-info page-info--photo-padding">
          <h1 class="page-info__title page-info__title--photo-font-size">
            Фото и видео
          </h1>
          <p
            class="page-info__text page-info__text--photo-width page-info__text--photo-font-size"
          >
            Не можете решиться на путешествие из-за курса? Фотографии помогут
            вам забыть о политике и экономике.
          </p>
        </div>
        <ul class="page-main__photo-list photo-list">
          <li class="photo-list__photo-item photo-item">
            <figure class="photo-item__figure">
              <a
                class="photo-item__link"
                href=""
                aria-label="Полноразмерное изображение"
              >
                <picture>
                  <source
                    type="image/webp"
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-sunset-desktop@1x.webp 1x,
                      img/photo-sunset-desktop@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-sunset-tablet@1x.webp 1x,
                      img/photo-sunset-tablet@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    srcset="
                      img/photo-sunset-mobile@1x.webp 1x,
                      img/photo-sunset-mobile@2x.webp 2x
                    "
                  />
                  <source
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-sunset-desktop@1x.jpg 1x,
                      img/photo-sunset-desktop@2x.jpg 2x
                    "
                  />
                  <source
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-sunset-tablet@1x.jpg 1x,
                      img/photo-sunset-tablet@2x.jpg 2x
                    "
                  />
                  <img
                    class="photo-item__image"
                    src="img/photo-sunset-mobile@1x.jpg"
                    srcset="img/photo-sunset-mobile@2x.jpg 2x"
                    width="280"
                    height="280"
                    alt="Закат"
                  />
                </picture>
              </a>
              <figcaption class="photo-item__caption">
                <div class="photo-item__text-wrapper">
                  <h2 class="photo-item__title">Неродные просторы</h2>
                  <p class="photo-item__author">Автор фото: Борис</p>
                </div>
                <p class="photo-item__likes">
                  <svg class="photo-item__likes-image" width="22" height="20">
                    <use xlink:href="#icon-like"></use>
                  </svg>
                  1350
                </p>
              </figcaption>
            </figure>
          </li>
          <li class="photo-list__photo-item photo-item">
            <figure class="photo-item__figure">
              <a
                class="photo-item__link"
                href=""
                aria-label="Полноразмерное изображение"
              >
                <picture>
                  <source
                    type="image/webp"
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-cactus-desktop@1x.webp 1x,
                      img/photo-cactus-desktop@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-cactus-tablet@1x.webp 1x,
                      img/photo-cactus-tablet@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    srcset="
                      img/photo-cactus-mobile@1x.webp 1x,
                      img/photo-cactus-mobile@2x.webp 2x
                    "
                  />
                  <source
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-cactus-desktop@1x.jpg 1x,
                      img/photo-cactus-desktop@2x.jpg 2x
                    "
                  />
                  <source
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-cactus-tablet@1x.jpg 1x,
                      img/photo-cactus-tablet@2x.jpg 2x
                    "
                  />
                  <img
                    class="photo-item__image"
                    src="img/photo-cactus-mobile@1x.jpg"
                    srcset="img/photo-cactus-mobile@2x.jpg 2x"
                    width="280"
                    height="280"
                    alt="Местная растительность"
                  />
                </picture>
              </a>
              <figcaption
                class="photo-item__caption photo-item__caption--padding-right"
              >
                <div class="photo-item__text-wrapper">
                  <h2 class="photo-item__title">
                    Местная растительность
                  </h2>
                  <p class="photo-item__author">Автор фото: Сергей</p>
                </div>
                <p class="photo-item__likes">
                  <svg class="photo-item__likes-image" width="22" height="20">
                    <use xlink:href="#icon-like"></use>
                  </svg>
                  143
                </p>
              </figcaption>
            </figure>
          </li>
          <li class="photo-list__photo-item photo-item">
            <figure class="photo-item__figure">
              <a
                class="photo-item__link"
                href=""
                aria-label="Полноразмерное изображение"
              >
                <picture>
                  <source
                    type="image/webp"
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-roads-desktop@1x.webp 1x,
                      img/photo-roads-desktop@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-roads-tablet@1x.webp 1x,
                      img/photo-roads-tablet@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    srcset="
                      img/photo-roads-mobile@1x.webp 1x,
                      img/photo-roads-mobile@2x.webp 2x
                    "
                  />
                  <source
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-roads-desktop@1x.jpg 1x,
                      img/photo-roads-desktop@2x.jpg 2x
                    "
                  />
                  <source
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-roads-tablet@1x.jpg 1x,
                      img/photo-roads-tablet@2x.jpg 2x
                    "
                  />
                  <img
                    class="photo-item__image"
                    src="img/photo-roads-mobile@1x.jpg"
                    srcset="img/photo-roads-mobile@2x.jpg 2x"
                    width="280"
                    height="280"
                    alt="Дорога на север"
                  />
                </picture>
              </a>
              <figcaption
                class="photo-item__caption photo-item__caption--padding-right-road"
              >
                <div class="photo-item__text-wrapper">
                  <h2 class="photo-item__title">Дорога на север</h2>
                  <p class="photo-item__author">Автор фото: Петр</p>
                </div>
                <p class="photo-item__likes">
                  <svg class="photo-item__likes-image" width="22" height="20">
                    <use xlink:href="#icon-like"></use>
                  </svg>
                  96
                </p>
              </figcaption>
            </figure>
          </li>
          <li class="photo-list__photo-item photo-item">
            <figure class="photo-item__figure">
              <a
                class="photo-item__link"
                href=""
                aria-label="Полноразмерное изображение"
              >
                <picture>
                  <source
                    type="image/webp"
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-bridge-desktop@1x.webp 1x,
                      img/photo-bridge-desktop@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-bridge-tablet@1x.webp 1x,
                      img/photo-bridge-tablet@2x.webp 2x
                    "
                  />
                  <source
                    type="image/webp"
                    srcset="
                      img/photo-bridge-mobile@1x.webp 1x,
                      img/photo-bridge-mobile@2x.webp 2x
                    "
                  />
                  <source
                    media="(min-width: 1200px)"
                    srcset="
                      img/photo-bridge-desktop@1x.jpg 1x,
                      img/photo-bridge-desktop@2x.jpg 2x
                    "
                  />
                  <source
                    media="(min-width: 768px)"
                    srcset="
                      img/photo-bridge-tablet@1x.jpg 1x,
                      img/photo-bridge-tablet@2x.jpg 2x
                    "
                  />
                  <img
                    class="photo-item__image"
                    src="img/photo-bridge-mobile@1x.jpg"
                    srcset="img/photo-bridge-mobile@2x.jpg 2x"
                    width="280"
                    height="280"
                    alt="Мост Дьявола"
                  />
                </picture>
              </a>
              <figcaption
                class="photo-item__caption photo-item__caption--padding-right"
              >
                <div class="photo-item__text-wrapper">
                  <h2 class="photo-item__title">Мост дьявола</h2>
                  <p class="photo-item__author">Автор фото: Антон</p>
                </div>
                <p class="photo-item__likes">
                  <svg class="photo-item__likes-image" width="22" height="20">
                    <use xlink:href="#icon-like"></use>
                  </svg>
                  254
                </p>
              </figcaption>
            </figure>
          </li>
        </ul>
        <div class="page-main__presentation presentation">
          <div class="presentation__text-wrapper">
            <h2 class="presentation__title">Все еще сомневаетесь?</h2>
            <p class="presentation__description">
              Смотрите видеопрезентацию и скорее за билетами, пока они не
              подорожали в очередной раз!
            </p>
          </div>
          <picture>
            <source
              type="image/webp"
              media="(min-width: 1200px)"
              srcset="
                img/video-desktop@1x.webp 1x,
                img/video-desktop@2x.webp 2x
              "
            />
            <source
              type="image/webp"
              media="(min-width: 768px)"
              srcset="img/video-tablet@1x.webp 1x, img/video-tablet@2x.webp 2x"
            />
            <source
              type="image/webp"
              srcset="img/video-mobile@1x.webp 1x, img/video-mobile@2x.webp 2x"
            />
            <source
              media="(min-width: 1200px)"
              srcset="img/video-desktop@1x.jpg 1x, img/video-desktop@2x.jpg 2x"
            />
            <source
              media="(min-width: 768px)"
              srcset="img/video-tablet@1x.jpg 1x, img/video-tablet@2x.jpg 2x"
            />
            <img
              class="presentation__video"
              src="img/video-mobile@1x.jpg"
              srcset="img/video-mobile@2x.jpg 2x"
              width="321"
              height="201"
              alt="Видео презентация"
            />
          </picture>
          <div class="presentation__video-buttons video-buttons">
            <div class="video-buttons__buttons-control buttons-control">
              <button
                class="buttons-control__replay"
                aria-label="Повтор воспроизведения"
              >
                <svg
                  class="buttons-control__image buttons-control__image--replay"
                  width="16"
                  height="20"
                >
                  <use xlink:href="#icon-video-replay"></use>
                </svg>
              </button>
              <div class="buttons-control__range-input">
                <div class="buttons-control__range-track">
                  <button class="buttons-control__range-thumb"></button>
                </div>
              </div>
              <button class="buttons-control__subtitles" aria-label="Субтитры">
                <svg
                  class="buttons-control__image buttons-control__image--subtitles"
                  width="32"
                  height="20"
                >
                  <use xlink:href="#icon-video-subtitles"></use>
                </svg>
              </button>
              <button
                class="buttons-control__fullscreen"
                aria-label="Во весь экран"
              >
                <svg
                  class="buttons-control__image buttons-control__image--fullscreen"
                  width="20"
                  height="20"
                >
                  <use xlink:href="#icon-video-fullscreen"></use>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </main>
      <footer class="page-footer">
        <p class="page-footer__contacts contacts">#visitSEDONA</p>
        <ul class="page-footer__social social">
          <li class="social__item">
            <a
              class="social__link"
              href="https://www.twitter.com"
              aria-label="Перейти на нашу страницу в Твиттере"
              target="_blank"
            >
              <svg
                class="social__image social__image--twitter"
                width="18"
                height="14"
              >
                <use xlink:href="#icon-twitter"></use>
              </svg>
            </a>
          </li>
          <li class="social__item">
            <a
              class="social__link"
              href="https://www.facebook.com"
              aria-label="Перейти на нашу страницу в Facebook"
              target="_blank"
            >
              <svg
                class="social__image social__image--facebook"
                width="9"
                height="18"
              >
                <use xlink:href="#icon-facebook"></use>
              </svg>
            </a>
          </li>
          <li class="social__item">
            <a
              class="social__link"
              href="https://www.youtube.com"
              aria-label="Перейти на нашу страницу в Youtube"
              target="_blank"
            >
              <svg
                class="social__image social__image--youtube"
                width="20"
                height="14"
              >
                <use xlink:href="#icon-youtube"></use>
              </svg>
            </a>
          </li>
        </ul>
        <div class="page-footer__copyright copyright">
          <h2 class="copyright__text">Разработано</h2>
          <a
            class="copyright__link"
            href="https://htmlacademy.ru/intensive/adaptive"
            aria-label="Перейти на сайт HTML Academy"
            target="_blank"
          >
            <svg
              class="copyright__image"
              width="27"
              height="34"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 26.943 34.09"
              enable-background="new 0 0 26.943 34.09"
              xml:space="preserve"
            >
              <path
                d="M13.62,0.017L13.472,0L0,1.412v24.661l13.473,8.017l13.43-7.99l0.042-0.025V1.412L13.62,0.017z M25.019,12.127L13.495,5.334 L13.494,5.23l-0.087,0.05l-0.088-0.056v0.109L1.925,12.118V3.147l11.548-1.212l11.547,1.212V12.127z M13.405,6.787L24.923,13.5 l-4.479,2.64l-7.093-4.221l-0.014,1.415l5.904,3.513l-0.86,0.507l-5.03-2.992l-0.014,1.415l3.827,2.275l-0.782,0.523l-3.031-1.787 l-0.014,1.413l1.853,1.091l-1.8,1.081L2.034,13.622L13.405,6.787z M1.925,15.127l11.411,6.791l0.016,1.044L5.41,18.234L5.395,19.65 l7.979,4.795l0.018,1.076l-7.973-4.74l-0.013,1.414l8.021,4.822l0.046,0.025l8.143-4.872l-0.011-5.177l3.415-2.036v10.021 L13.472,31.85L1.925,24.979V15.127z"
              ></path>
            </svg>
          </a>
        </div>
      </footer>
    </div>
  </body>
</html>
